import React, { Component } from 'react'
import { Picker} from 'antd-mobile';
// 如果不是使用 List.Item 作为 children
const CustomChildren = props => (
  <div
    onClick={props.onClick}
    style={{ backgroundColor: '#fff', width: '100%'}}
  >
    <div className="test" style={{ display: 'flex', height: '45px', lineHeight: '45px',width: '100%'  }}>
      <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{props.children}</div>
      <div style={{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}</div>
    </div>
  </div>
);

// const Option = Select.Option;
export default class Linkage extends Component{
  constructor(props){
    super(props);
    this.state={
        pickerValue: [],
    };
  }
  render(){
    let antdDistrict =[];
    let districtData = require('./location.json');
    Object.keys(districtData).forEach((index)=>{
      let itemLevel1 ={};
      let itemLevel2 ={};
      itemLevel1.value = districtData[index].code;
      itemLevel1.label = districtData[index].name;
      itemLevel1.children = [];
      let data = districtData[index].cities;
      Object.keys(data).forEach((index)=>{
          itemLevel2.value = data[index].code;
          itemLevel2.label = data[index].name;
          itemLevel2.children = [];
          let data2 = data[index].districts;
          let itemLevel3 ={};
          itemLevel3.children = [];
          Object.keys(data2).forEach((index)=>{
              itemLevel3.value = index;
              itemLevel3.label = data2[index];
              itemLevel2.children.push(itemLevel3);
              itemLevel3 ={};
          });
          itemLevel1.children.push(itemLevel2);
          itemLevel2 ={};
      });
      antdDistrict.push(itemLevel1)
    });
    console.log(antdDistrict);
    return (
     
          <Picker
              title="选择地区"
              extra="请选择省市区"
              data={antdDistrict}
              value={this.state.pickerValue}
              onChange={v => this.setState({ pickerValue: v })}
              onOk={v => this.setState({ pickerValue: v })}
              onClick={()=>{console.log('xx')}}
          >
              <CustomChildren>所在地区</CustomChildren>
          </Picker>
     
    )
  }
}